<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <!-- 字符编码声明，指定文档使用UTF-8编码，确保中文等字符正常显示 -->
   <meta charset="UTF-8">
   <!-- 网页标题，显示在浏览器标签栏，也是搜索引擎结果的主要标题，需精准概括页面核心内容 -->
   <title>前端开发基础 - HTML5元数据应用指南</title>
   <!-- 视口设置，用于响应式设计：width=device-width 使页面宽度适配设备屏幕，initial-scale=1.0 设定初始缩放比例为1，确保移动端显示正常 -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 网页内容描述，用于搜索引擎结果页展示，需简洁概括页面核心价值，提升用户点击意愿，直接影响SEO效果 -->
   <meta name="description" content="本文系统讲解HTML5元数据标签的分类、语法及使用场景，涵盖基础配置、SEO优化、社交媒体适配等实用知识，帮助前端开发者规范元数据设置。">
   <!-- 关键词，帮助搜索引擎快速识别页面主题，需选取与页面内容高度相关、用户常搜的核心词汇，多个关键词用英文逗号分隔 -->
   <meta name="keywords" content="HTML5,元数据标签,meta标签用法,SEO优化技巧,前端开发规范,响应式设计配置">
   <!-- 作者信息，明确网页内容的创作者，便于内容归属追溯和作者身份展示 -->
   <meta name="author" content="李四">
   <!-- 版权信息，声明内容的版权归属方及权利范围，起到版权保护警示作用 -->
   <meta name="copyright" content="© 2023 前端技术学习网 保留所有权利">
   <!-- robots指令，告诉搜索引擎爬虫行为规则：index 允许爬虫收录当前页面，follow 允许爬虫跟随页面内的链接爬取其他页面 -->
   <meta name="robots" content="index, follow">
   <!-- 网页生成工具信息，记录开发此页面使用的工具及版本，便于后续维护时追溯开发环境 -->
   <meta name="generator" content="Visual Studio Code 1.82.0">
   <!-- 设定网页的过期时间，格式需符合GMT标准，过期后浏览器会重新请求服务器获取最新页面，避免加载过期缓存 -->
   <meta http-equiv="expires" content="Wed, 20 Sep 2023 08:00:00 GMT">
   <!-- 禁止浏览器缓存指令，pragma为HTTP/1.0协议属性，no-cache 表示浏览器每次访问都需向服务器请求最新页面，不使用本地缓存 -->
   <meta http-equiv="pragma" content="no-cache">
   <!-- 页面自动刷新与跳转指令：content前半部分“30”表示30秒后执行操作，后半部分“url=”指定跳转目标地址，需确保URL格式正确 -->
   <meta http-equiv="refresh" content="30;url=https://example.com/latest">
   <!-- 针对IE浏览器的兼容性设置，X-UA-Compatible 是IE专属属性，IE=edge 强制IE浏览器使用其支持的最新版本渲染引擎，避免兼容模式下的显示问题 -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <!-- 社交媒体分享标签 - Open Graph协议（主要用于Facebook、微信朋友圈等平台），规范分享时的内容展示格式 -->
   <meta property="og:title" content="HTML5元数据标签完全指南"> <!-- 分享时显示的标题，可与页面title不同，更侧重吸引分享场景的用户 -->
   <meta property="og:description" content="系统掌握HTML5元数据标签的使用技巧，从基础配置到SEO、社交媒体适配，全方位提升网站性能与传播效果"> <!-- 分享时显示的描述，需简洁有吸引力 -->
   <meta property="og:type" content="article"> <!-- 定义分享内容的类型，article表示文章类内容，其他常见类型还有website（网站）、video（视频）等 -->
   <meta property="og:url" content="https://example.com/html-meta-tags"> <!-- 分享内容对应的唯一URL，确保用户点击后跳转至正确页面 -->
   <meta property="og:image" content="https://example.com/images/meta-tags.jpg"> <!-- 分享时显示的缩略图，需确保图片URL有效，alt属性需写在img标签中，此处og:image无需alt -->
   <!-- 社交媒体分享标签 - Twitter卡片（用于Twitter平台分享），summary_large_image 表示使用大图卡片样式，提升分享视觉效果 -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="HTML5元数据标签完全指南"> <!-- Twitter分享的标题 -->
   <meta name="twitter:description" content="掌握HTML5元数据标签的使用，提升网站SEO和用户体验"> <!-- Twitter分享的描述 -->
</head>
<body>
   <h1>HTML5元数据标签应用示例</h1>
   <p>本页面完整展示了HTML5中各类元数据标签的标准用法，包括基础配置标签、SEO优化标签、浏览器兼容标签及社交媒体适配标签，所有标签均符合HTML5语法规范，可直接用于实际项目开发。</p>
</body>
</html>